<template>
    <el-dialog
            :title="title"
            :visible="show"
            width="50%"
            :close-on-click-modal="false"
            :before-close="closeDialog"
            @open="openAction"
    >
        <el-form
                ref="userForm"
                :model="userForm"
                :rules="rules"
                label-width="120px"
                style="width: 400px"
                size="mini">
            <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" show-password autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重复输入密码" prop="rePassword">
                <el-input v-model="userForm.rePassword" show-password></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="resetPwd">重置密码</el-button>
           <el-button @click="closeDialog">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {passwordReset} from "@/api/user";

    export default {
        name: "UserPasswordReset",
        props:{
            title:{type:String,default:"用户编辑"},
            show:{type: Boolean},
            userInfo:{type:Object}
        },
        data(){
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.userForm.rePassword !== '') {
                        this.$refs['userForm'].validateField('rePassword');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                userForm:{
                    id:"",
                    password:"",
                    rePassword:""
                },
                rules:{
                    password:[
                        {required:true,message:"密码不能为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    rePassword:[
                        {required:true,message:"密码不能为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            //关闭窗口
            closeDialog(){
                this.$emit("update:show",false);
            },
            openAction() {
                let that_ = this
                this.$nextTick(()=>{
                    //清空表单
                    that_.$refs.userForm.resetFields();
                    //解构赋值
                    that_.userForm = {...this.userInfo}
                })
            },
            resetPwd(){
                let param = {id:this.userForm.id,password:this.userForm.password}
                this.$refs.userForm.validate((valid) =>{
                    if(valid){
                        this.$confirm("是否确认重置？",{
                            type:"warning"
                        }).then(()=>{
                            passwordReset(param)
                                .then(res =>{
                                    this.$message.success("密码重置成功！")
                                    this.closeDialog()
                                }).catch(err =>{
                                this.$message.error(err.message)
                            })
                        }).catch(()=>{})
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>